<template>
	<view style="text-align: center;height: 100%;padding-top: 50px;">
		<view class="u-m-r-10" style="margin-bottom: 20px;">
			<u-avatar :src="pic" size="140"></u-avatar>
		</view>
		<view style="display: flex;flex-direction: column;align-items: center;">
			<u-cell-group style="margin-bottom: 10px;width: 80%;">
				<u-field v-model="registerInfo.username" label="账号" placeholder="请填写账号">
				</u-field>
			</u-cell-group>
			<u-cell-group style="margin-bottom: 10px;width: 80%;">
				<u-field v-model="registerInfo.realName" label="姓名" placeholder="请填写姓名">
				</u-field>
			</u-cell-group>
			<u-cell-group style="margin-bottom: 10px;width: 80%;">
				<u-field label="性别" disabled>
					<u-radio-group v-model="registerInfo.sex" slot="right" style="width: 200px;">
						<u-radio name="1">男</u-radio>
						<u-radio name="2">女</u-radio>
					</u-radio-group>
				</u-field>
			</u-cell-group>
			<u-cell-group style="margin-bottom: 10px;width: 80%;">
				<u-field v-model="registerInfo.phone" label="电话" placeholder="请填写电话">
				</u-field>
			</u-cell-group>
			<u-cell-group style="margin-bottom: 10px;width: 80%;">
				<u-field password v-model="registerInfo.password" label="密码" placeholder="请填写密码">
				</u-field>
			</u-cell-group>
			<u-cell-group style="margin-bottom: 10px;width: 80%;">
				<u-field :error-message="errorMessage" password v-model="rePassword" label="确认密码" placeholder="请填写确认密码"
					@blur="checkPwd">
				</u-field>
			</u-cell-group>
			<u-cell-group style="margin-bottom: 10px;width: 80%;">
				<u-field v-model="registerInfo.email" label="邮箱" placeholder="请填写邮箱">
				</u-field>
			</u-cell-group>
			<u-cell-group style="width: 80%;">
				<u-field password v-model="registerInfo.validateCode" label="验证码" placeholder="请填写验证码">
					<u-button :disabled="disabled" size="mini" slot="right" type="success"
						@click="sendEmailValidateCode">{{codeText}}
					</u-button>
				</u-field>
			</u-cell-group>
			<u-button @click="register" shape="circle" :custom-style="{width:'100%',marginTop:'40rpx'}" type="primary"
				style="width: 86%;">
				立即注册</u-button>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		v4 as uuid
	} from 'uuid'
	export default {
		data() {
			return {
				registerInfo: {
					username: '',
					realName: '',
					sex: '',
					phone: '',
					password: '',
					email: '',
					validateCodeId: '',
					validateCode: '',
				},
				pic: '',
				rePassword: '',
				disabled: false,
				codeText: "发送验证码",
				errorMessage: ''
			}
		},
		computed: {},
		methods: {
			sendEmailValidateCode() {
				this.registerInfo.validateCodeId = uuid()
				this.$api.sendEmailValidateCode({
					validateCodeId: this.registerInfo.validateCodeId,
					targetEmail: this.registerInfo.email
				}).then(res => {
					this.$refs.uToast.show({
						title: res.result,
						type: 'success',
					})
				})
				let time = 30
				const timer = setInterval(() => {
					this.disabled = true
					this.codeText = time + '秒重新发送'
					time--
					if (time === 0) {
						this.disabled = false
						this.codeText = '发送验证码'
						window.clearInterval(timer)
					}
				}, 1000)
			},
			register() {
				console.log(this.registerInfo)
				this.$api.userRegiste({
					...this.registerInfo
				}).then(res => {
					if (res.code = 20000) {
						this.$refs.uToast.show({
							title: '注册成功',
							type: 'success',
							url: "/pages/user/login/login"
						})
					}
				})
			},
			checkPwd() {
				this.errorMessage = this.rePassword !== this.registerInfo.password ? "两次密码不相同" : ""
			}
		}
	}
</script>

<style>
	page {
		background-color: #ededed;
	}
</style>
